<template>
  <div style="width: 1200px;height: 600px;">
    <div style="width: 100px;height: 100px">
    </div>
    <center>
      <div style="align-content: center">
        <van-button @click="show_true_username">用户名注册</van-button>
        <van-button @click="show_true_phone">手机号注册</van-button>
      </div>
      <div v-show="show_username" style="width: 400px;height: 240px">
        <van-field label="用户名:" placeholder="请输入用户名" v-model="username" style="width: 350px; " @change="chang_poe"></van-field>
        <van-field label="密码:" placeholder="请输入密码" type="password" :center="true" v-model="password"
                   style="width: 350px" @change="chang_poe"></van-field>
        <van-field label="确认密码:" placeholder="请输入确认密码" type="password" :center="true" v-model="password1"
                   style="width: 350px" @change="chang_poe"></van-field>
        <van-field label="邮箱:" placeholder="请输入邮箱"  :center="true" v-model="email"
                   style="width: 350px" @change="chang_poe"></van-field>
        <div>
          <van-field label="邮箱验证码:" placeholder="请输入邮箱验证码" :center="true" style="width: 350px" v-model="email_code" @change="chang_poe">
            <template #button>
              <van-button size="small" type="primary" @click="post_emil_code" v-show="show_emil_code">发送邮箱验证码</van-button>
              <van-button size="small" type="primary"  v-show="show_emil_state">
                <van-count-down
                    ref="countDowns"
                    millisecond
                    :time="60000"
                    :auto-start="false"
                    format="ss倒计时"
                    @finish="finish_mail_code()"/>
              </van-button>
            </template>
          </van-field>
        </div>
      </div>
      <div v-show="show_phone" style="width: 400px;height: 100px">
        <van-field label="手机号:" placeholder="请输入手机号" v-model="phone" style="width: 350px; " @change="chang_poe"></van-field>
        <van-field label="验证码:" placeholder="请输入验证码" v-model="phone_code" style="width: 350px" @change="chang_poe">
          <template #button>
            <van-button size="small" type="primary" @click="post_phone_code" v-show="show_phone_code">发送验证码</van-button>
            <van-button size="small" type="primary"  v-show="show_state">
              <van-count-down
                ref="countDown"
                millisecond
                :time="60000"
                :auto-start="false"
                format="ss倒计时"
             @finish="finish_code()"/>
            </van-button>
          </template>
        </van-field>
      </div>
      <van-button @click="registered">注册</van-button>
    </center>
  </div>
</template>

<script>
import {v4 as uuid4} from 'uuid'

export default {
  name: "reg",
  data() {
    return {
      show_username: true,
      username: '',
      password: '',
      code: '',
      imageurl: '',
      password1: '',
      show_phone: false,
      phone: '',
      phone_code: '',
      email_code: '',
      email: '',
      // show_phone_code: false,
      num:'',
      code_num:'',
      show_phone_code:true,
      show_state:false,
      show_emil_code:true,
      show_emil_state:false,

    }
  },
  methods: {
    // 邮箱倒计时
    finish_mail_code(){
      this.show_emil_code=true
      this.show_emil_state=false
    },
    post_emil_code(){
      this.$refs.countDowns.start();
      this.show_emil_code=false
      this.show_emil_state=true
      this.myaxios('http://localhost:5000/post_right', 'post',
          {
            'email': this.email,
          })
          .then(res => {
            console.log(res)
            alert(res.msg)
          })
    },
    // 手机号倒计时
    finish_code(){
      // 倒计时结束时
      this.show_phone_code=true
      this.show_state=false
    },
    registered(){
      if(this.show_username==true && this.num==2){
        this.myaxios('http://localhost:5000/reg', 'post',
            {
              'username': this.username,
              'password': this.password,
              'email': this.email,
            })
            .then(res => {
              console.log(res)
              if (res.code==200){
                alert(res.msg)
                window.location.href='/login'
              }

            })
      }else {
        if(this.show_phone==true && this.num==2){
          console.log(55999)
          this.myaxios('http://localhost:5000/z_mobile', 'post',
              {
                'phone': this.phone,
              })
              .then(res => {
                console.log(res)
                if (res.code==200){
                  alert(res.msg)
                  window.location.href='/login'
                }
              })
        }

      }

    },
    // 测试正则验证
    chang_poe() {
      this.myaxios('http://localhost:5000/z_reg/', 'post',
          {
            'username': this.username,
            'password': this.password,
            'password1': this.password1,
            'code': this.code,
            'phone':this.phone,
            'email':this.email,
            'phone_code':this.phone_code,
            'email_code':this.email_code
          })
          .then(res => {
            console.log(res)
            if (res.code !='200'){
              alert(res.msg)
              this.num=1
            }else {
              if (res.code =='200'){
                this.num=2
            }
              console.log(this.num)
            }
          })
    },
    // 发送验证码
    post_phone_code() {
      this.myaxios('http://localhost:5000/mobile_phone','get',{'phone':this.phone})
      .then(res=>{
        console.log(res)

        if (res.code==200){
          this.show_phone_code = false
          this.show_state = true
          this.$refs.countDown.start();
          this.code_num=1
        }else if (res.code!=200){
          alert(res.msg)
        }
      })

    },
    // 点击用户注册
    show_true_username() {
      this.show_username = true
      this.show_phone = false
      // this.myaxios('')
      // .then(res=>{
      //   console.log(res)
      // })
    },
    // 点击手机号注册
    show_true_phone() {
      // this.$refs.countDown.start();
      this.show_username = false
      this.show_phone = true
    },
    get_image() {

      this.imagenum = uuid4()
      this.imageurl = 'http://localhost:5000/getimagecode/?uuid=' + this.imagenum
    }
  },
  mounted() {
    this.get_image()
  }
}
</script>

<style scoped>

</style>
